<template>
  <div class="pages procurement">
    <div class="pageLevel" v-if="!sub">
      <!-- 操作框 -->
      <div class="operationBox tableSearch">
        <el-button type="primary" size="mini" v-if='setRole("创建")' @click="routerPush()">新增</el-button>
        <el-button type="primary" size="mini" v-if='setRole("提交审核")' @click="purchaseAudit('1')">提交审核</el-button>
        <el-button type="primary" size="mini" v-if='setRole("审核")' @click="purchaseAudit('2')">审核</el-button>
        <el-button type="primary" size="mini" v-if='setRole("驳回")' @click="purchaseAudit('3')">驳回</el-button>
      </div>

      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form size="mini">
          <el-form-item label="订单状态：" label-width="100px" style="width:200px;">
            <el-select v-model="selectdata.selected" style="width:135px;" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item, index) in orderStatusArr" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="50px">
            <el-input v-model="selectdata.keyword" placeholder="请输入订单号"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click="searchSelect">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="55"></el-table-column>
          <el-table-column prop="purchaseCode" label="报货订单号" align="center"></el-table-column>
          <el-table-column prop="orderDate" :formatter="timestamp" label="单据日期" align="center"></el-table-column>
          <el-table-column prop="confirmAmount" label="总金额" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.confirmAmount.toFixed(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="statusFlow" label="订单状态" align="center">
            <template slot-scope="scope">
              <span>{{orderStatusArr[scope.row.statusFlow]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="操作员" align="center"></el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="routerPushInfo(scope.row.id, '1')" type="text">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 页码 -->
        <page-unit :pageData="pageData" :func="tableget"></page-unit>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import state from "@/util/state";
import util from "@/util";
import pageUnit from "@/components/Page";
import {
  updateAuditStatus,
  getGoodsPurchaseListPage
} from "@/api";
export default {
  computed: mapState([
    "merchantId",
    "sub",
    "userInfo",
    "power",
    "isStore"
  ]),
  components: { pageUnit },
  data () {
    return {
      timestamp: state.timestamp,
      multipleSelections: [], // 列表多选数组
      orderStatusArr: state.orderStatusArr, // 订单状态
      selectdata: {
        selected: "",
        keyword: ""
      },
      tableData: [],
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      }
    };
  },
  mounted () {
    this.tableget(this.pageData.pageSize, 1);
  },
  watch: {
    sub: {
      handler: function (val, oldVal) {
        if (oldVal != null && val == false) {
          this.tableget(this.pageData.pageSize, 1);
        }
      },
      deep: true
    }
  },
  methods: {
    // 分配权限
    setRole (key) {
      return util.selectTitle(this.power, key)
    },
    // 审核
    purchaseAudit (type) {
      if (this.multipleSelections.length == 0) {
        this.$message.error("请先选择报货单据！")
        return false
      }
      let arr = this.multipleSelections.map(i => i.id)
      updateAuditStatus({
        purchaseIds: arr.toString(),
        auditStatus: type
      }).then(res => {
        this.$message.success(res.msg)
        this.tableget(this.pageData.pageSize, 1)
      })
    },
    handleSelectionChange (val) {
      this.multipleSelections = val
    },
    // 获取表格数据
    tableget (pageSize, pageNum) {
      getGoodsPurchaseListPage({
        shopId: this.merchantId,
        statusFlow: this.selectdata.selected,
        purchaseCode: this.selectdata.keyword,
        pageNum: pageNum,
        pageSize: pageSize,
        purchaseType: "0" //采购单类型：0-报货，1-采购，2-自采
      }).then(res => {
        this.pageData.totalItems = res.data.pageTotal;
        this.tableData = res.data.list;
        this.multipleSelections = [];
      });
    },
    // 点击查询按钮
    searchSelect () {
      this.tableget(this.pageData.pageSize, 1);
    },
    // 新增
    routerPush () {
      util.routerTo("/order-center/purchase-management/purchase-storeReceiptMg/purchase-storeReceiptAdd");
    },
    // 查看
    routerPushInfo (id, showTab) {
      util.routerTo("/order-center/purchase-management/purchase-storeReceiptMg/purchase-storeReceiptEdit", { id: id, showTab: showTab });
    }
  }
};
</script>
